<template>
  <div class="app-container">
    <el-form :model="form" ref="form" label-width="100px" class="single-form">

      <el-row>
        <el-col  :xs="20" :sm="20" :md="20" :lg="20">
          <el-form-item label="题干：" prop="title"  >
            <el-input @focus="handleRichEditor(10)" v-model="form.title"  />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :xs="18" :sm="18" :md="18" :lg="18">
          <el-form-item label="选项：" prop="items" class="items">
            <el-form-item  prop="content" :label="item.prefix" :key="item.prefix"  v-for="(item,index) in form.items"  label-width="20px" class="question-item-label">
              <el-input @focus="handleRichEditor(index)"  v-model="item.content"    class="question-item-content-input"/>
<!--
              <el-button  type="danger" size="mini" class="question-item-remove" icon="el-icon-delete" @click="questionItemRemove(index)"></el-button>
-->
            </el-form-item>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :xs="20" :sm="20" :md="20" :lg="20">
          <el-form-item label="解析：" prop="analyze" class="analyze">
            <el-input @focus="handleRichEditor(11)" v-model="form.analyze" />
          </el-form-item>
        </el-col>

      </el-row>

      <el-form-item class="correctArray" label="正确答案：" prop="correctArray" required>
        <el-radio-group v-model="form.correctArray" style="margin-left: 2%">
          <el-radio  v-for="item in form.items"  :key="item.prefix"  :label="item.prefix">{{item.prefix}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="buttons" >
        <el-button style="margin-left: 5%" type="primary" @click="submit">提交</el-button>
        <el-button style="margin-left: 5%" @click="reset">重置</el-button>
        <el-button style="margin-left: 5%" type="success" @click="preview">预览</el-button>
      </el-form-item>
    </el-form>


    <!-- 富文本弹出框 -->
    <el-dialog :visible.sync="editorVisible" align="center" :before-close="handleClose">
      <div class="edit_container">
        <quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange()">
        </quill-editor>
      </div>
      <el-row>
          <el-button class="editor_confirm" type="primary" @click="handleRichEditorConfirm(editorId)">确定</el-button>
          <el-button class="editor_cancel" @click="handleRichEditorCancel">取消</el-button>
      </el-row>
    </el-dialog>


    <!-- 预览内容弹出 -->
    <el-dialog :visible.sync="previewVisible" align="left" width="50%">
      <el-form :model="form" ref="form" label-width="100px" >

        <el-row>
            <el-form-item label="题干：" >
              <span class="preview_img" v-html="form.title"></span>
            </el-form-item>
        </el-row>

        <el-row>
            <el-form-item label="选项：" prop="items">
              <el-form-item  prop="content" :label="item.prefix + '.'" :key="index"  v-for="(item,index) in form.items"  label-width="20px" class="question-item-label">
                <span v-html="item.content"></span>
              </el-form-item>
            </el-form-item>
        </el-row>

        <el-row>
            <el-form-item label="解析：" >
              <span v-html="form.analyze"></span>
            </el-form-item>
        </el-row>

        <el-form-item label="正确答案：">
          <span v-html="form.correctArray"></span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { quillEditor } from "vue-quill-editor"; //调用编辑器
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";

  import { addQuestion, queryQuestionByIdList, updateQuestion } from '../../../api/index';
  import { queryQuestionPage } from '../../../api';
  export default {
    name: 'SingleCreate',
    data() {
      return {
        editorId: 0,
        form: {
          id: '',
          questionType: 1,
          title: '',
          items: [
            { prefix: 'A', content: '' },
            { prefix: 'B', content: '' },
            { prefix: 'C', content: '' },
            { prefix: 'D', content: '' }
          ],
          analyze: '',
          score: 0,
          correctArray: '',
        },
        subjectFilter: null,
        formLoading: false,
        editorVisible: false,
        previewVisible: false,
        content: '',
        editorOption: {
          placeholder: 'Hello World'
        },
        questionShow: {
          qType: 0,
          dialog: false,
          question: null,
          loading: false
        }
      }
    },
    created() {

    },
    async mounted() {
      let id = this.$route.query.id;
      if (!(id === undefined)) {
        //发送请求
        console.log(id);

        const data = await queryQuestionPage({ id: id, type: '' });
        console.log(data.records[0]);

        this.form.id = data.records[0].id;
        this.form.questionType = data.records[0].type;
        this.form.title = data.records[0].title;
        this.form.items = data.records[0].items;
        this.form.analyze = data.records[0].analyze;
        this.form.correctArray = data.records[0].correctArray;
        this.form.score = data.records[0].score;
      }

    },
    components: {
      quillEditor
    },
    methods: {
      handleRichEditor(id) {
        this.editorId = id;
        this.editorVisible = true;
        switch (id) {
          case 10:
            this.content = this.form.title;
            break;
          case 11:
            this.content = this.form.analyze;
            break;
          case id:
            this.content = this.form.items[id].content;
            break;
          default:
            break;
        }
      },


      //富文本失去焦点事件
      onEditorBlur($event) {

      },
      //富文本获取焦点事件
      onEditorFocus($event) {

      },
      //当富文本内容改变
      onEditorChange() {

      },
      handleClose(done) {
        this.$confirm("确认关闭?")
          .then(_ => {
            done();
          })
          .catch(_ => {

          });
      },

      /* 富文本确认 */
      handleRichEditorConfirm(id) {
        /* 富文本对应 */
        console.log(id);
        switch (id) {
          case 10:
            this.form.title = this.content;
            break;
          case 11:
            this.form.analyze = this.content;
            break;
          case id:
            this.form.items[id].content = this.content;
            break;
          default:
            break;
        }
        this.editorVisible = false;
      },
      handleRichEditorCancel() {
        this.editorVisible = false;
      },


      /* 提交表单 */
      async submit() {

        console.log(this.form.id === '');
        if(this.form.id === ''){
          let type = this.form.questionType;
          let title = this.form.title;
          let items = this.form.items;
          let analyze = this.form.analyze;
          let correctArray = this.form.correctArray;
          let score = this.form.score;

          await addQuestion({ type, title, items, analyze, correctArray, score });

          console.log(this.form);
          this.reset();
          await this.$message.success("添加成功!");
          await this.$router.push({ path: '/questionList' });
        }else{
          let id = this.form.id;
          let type = this.form.questionType;
          let title = this.form.title;
          let items = this.form.items;
          let analyze = this.form.analyze;
          let correctArray = this.form.correctArray;
          let score = this.form.score;

          await updateQuestion({ id, type, title, items, analyze, correctArray, score });

          console.log(this.form);
          this.reset();
          await this.$message.success("修改成功!");
          await this.$router.push({ path: '/questionList' });
        }
      },
      /* 重置表单 */
      reset() {
        this.$refs.form.resetFields();
        let questionItemObject = [
          { prefix: 'A', content: '' },
          { prefix: 'B', content: '' },
          { prefix: 'C', content: '' },
          { prefix: 'D', content: '' }
        ]
        this.form.items = questionItemObject;
      },

      /* 试题预览 */
      preview() {
        this.previewVisible = true;
      },


      /* 页面跳转,发送请求 */
      getData(){

        // 发送id,获取试题数据
      }


    },
    watch: {
        editorVisible() {
          if (this.editorVisible === false) {
            this.content = '';
          }
        }
      },
  }
</script>

<style scoped>


  .single-form{
    width: 80%;
    margin-top: 3%;
    margin-left: 15%;
  }

  .question-item-label{
    position: relative;
    margin-top: 2%;
    padding-top: 2%;
  }

  .question-item-content-input{
    margin-left: 3%;
  }

  .preview_items{
    position: relative;
  }

  .preview_content{
    position: absolute;
  }


  /* 富文本样式 */
  .editor_confirm{
    margin-top: 1%;
    margin-left: -5%;
  }

  .editor_cancel{
    margin-left: 20%;
  }

  .analyze{
    margin-top: 3%;
  }

  .correctArray{
    margin-top: 3%;
  }

  .buttons{
    margin-top: 3%;
    padding-left: 5%;
  }


</style>
